<template>
<!-- 居家检测 -->
    <div class="quan">
        <div class="ju">
            <span>居家检测/居家检测</span>
        </div>
        <div class="head" >
            <div class="head1" >
                <span>姓名:</span><input type="text" placeholder="请输入" v-model="name" >
            
                <span>性别:</span>
                <select v-model="changea">
                    <option value="" disabled selected>请选择</option>
                    <option  v-for="item in kindList" >{{item}}</option>
                </select>
            
                <span>身份证号:</span><input type="text" placeholder="请输入" v-model="shen"><br>
            </div>
            
            <div class="head1">
                <span>联系电话:</span><input type="text" placeholder="请输入" v-model="phone" >
            
                <span>来源:</span>
                <select  v-model="changea1">
                        <option value="" disabled selected>请选择</option>
                         <option v-for="item in kindListy">{{ item }}</option>
                </select>
            
            <span>状态:</span>
            <select  v-model="changea2">
                <option value="" disabled selected>请选择</option>
                <option v-for="item in kindListx" >{{ item }}</option>
            </select>
            </div>
            
            
            <div class="chaxun">
                <el-button type="primary" @click="cha">查询</el-button>
                <el-button type="primary" @click="chong">重置</el-button>
                <div class="mb-2 flex items-center text-sm">
                    <el-radio-group v-model="radio1" class="ml-4" >
                    <el-radio label="正常" size="large">正常</el-radio>
                    <el-radio label="异常" size="large">异常</el-radio>
                </el-radio-group>
            </div>
            </div>
        </div>
        <div class="hh">
            <router-link to="/xju">
                <el-button class="xin" type="primary" >新增</el-button>
            </router-link>
            <el-button class="dao" type="primary" @click="daoExcel">Excel导出</el-button>
            <div class="hh1">
                <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%" >
                <el-table-column  label="序号" width="100px" align="center" type=index />
                <el-table-column  label="姓名"  width="100px" align="center" #default="scope">
                    <div class="bei" v-if="scope.row.yi=='异常'"></div>
                    <span class="yi" v-if="scope.row.yi=='异常'">异</span>
                    <span>{{ scope.row.name }}</span>
                </el-table-column>>
                <el-table-column prop="sex" label="性别"  width="100px" align="center"/>
                <el-table-column prop="idCard" label="身份证号" width="150px"  align="center"/>
                <el-table-column prop="phoneNum" label="联系电话"  width="100px" align="center"/>
                <el-table-column prop="residenceAddress" label="籍贯地"   width="200px" align="center"/>
                <el-table-column prop="address" label="现居地"  width="200px" align="center"/>
                <el-table-column prop="jointType" label="密接类型"   width="100px" align="center"/>
                <el-table-column prop="source" label="来源"  width="150px" align="center"/>
                <el-table-column prop="registrant" label="登记人"  width="100px" align="center"/>
                <el-table-column prop="registrationDate" label="登记日期"  width="100px" align="center"/>
                <el-table-column prop="removeDate" label="隔离解除日期"  width="150px" align="center"/>
                <el-table-column prop="status" label="状态" width="100px" align="center"/>
                <el-table-column fixed="right" label="操作" width="264px" align="center" #default="scope">
                    <!-- 判断条件为是否密接 -->
                    <template v-if="scope.row.jointType=='次密接'||scope.row.jointType=='密接'" >
                        <router-link :to="{name:'cha', query: {id:scope.row.id,jie:scope.row.status}}" ><el-button link type="primary" size="small" >查看详情</el-button></router-link>
                        <router-link :to="{name:'miqie', query: {id:scope.row.id}}"><el-button link type="primary" size="small">密切跟踪</el-button></router-link>
                        <el-button link type="primary" size="small" @click="show(scope.row)">解除监测</el-button>
                        
                    </template>
                    <template v-if="scope.row.jointType=='一般'" >
                        <router-link :to="{name:'bianju', query: {id:scope.row.id}}"><el-button link type="primary" size="small" >编辑</el-button></router-link>
                        
                        <el-button link type="primary" size="small" @click="san(scope.row.id)">删除</el-button><br>
                        <router-link :to="{name:'cha', query: {id:scope.row.id,jie:scope.row.status}}" ><el-button link type="primary" size="small" >查看详情</el-button></router-link>
                        <router-link :to="{name:'miqie', query: {id:scope.row.id}}"><el-button link type="primary" size="small">密切跟踪</el-button></router-link>
                        <el-button link type="primary" size="small" @click="show(scope.row)">解除监测</el-button>
                    </template>
                </el-table-column>
                    
                </el-table>
            </div>
            <div class="fenye">
                <!-- //分页 -->
                <div class="table-footer">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10]" :small="small" :disabled="disabled" :background="background"
                            layout="total,  prev, pager, next,sizes, jumper" 
                            :total="tableData.length" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
            <router-link to="/meir"><el-button type="info" class="fan" round>返回</el-button></router-link>
        </div>
        <!-- 解除密切的模态框 -->
        <teleport to="body" >
                    <!-- to后面的地址还可以是 html  或者其他 div等 -->
                    <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
                    <div class="mask" v-if="isShow.showDialog">
                        <div class="dialog1">
                            <h2>是否确认解除</h2>
                        
                            
                            <el-button class="dialog-btn" @click="hidden" type="primary" round>返回</el-button>
                            <el-button class="dialog-btn" @click="hidden2" type="primary" round>确认</el-button>
                        </div>
                    </div>
                </teleport>
    </div>
    <teleport to="body" >
        <div class="que" v-show="que">
            <h1>确定删除？</h1>
            <div>
            <button @click="fan">返回</button>
            <button  @click="que1">确定</button>
             </div>
            
    </div>
    </teleport>
</template>
    
<script lang="ts">
import { defineComponent, reactive, ref,toRefs,onMounted,onBeforeMount, toRef} from 'vue'
import { useRouter } from 'vue-router'
import Excel from '@/util/Excel'
import axios from '@/views/chen/http'
// import XLSX, { WorkSheet } from 'xlsx'
export default defineComponent({
    name: "meij",
    setup() {
        const router = useRouter()
        // const jie = route.query.key //接收跳转参数
            ;
        //表格数据
        let tableData1=reactive({
            tableData: [
        {
                   date: 1,
                   name: '张晓雅', //姓名
                   gender:"女", //性别
                   shen:"2930511229321",//身份证号
                   phone:"13022568213",//联系电话
                   ji:"四川省 成都市 龙泉驿区",//籍贯地
                   ju:"四川省 成都市 龙泉驿区",//现居住地
                   mijie:"次密",//密接类型
                   source:"核实后转居家检测",//来源
                   den:"系统",//登记人
                   denji:"2020-11-12",//登记日期
                   gejie:"2020-11-11 15:00",//隔离解除日期
                   state: '检测中 ',//状态
                   yi:"正常",
               }
        ]
        })
       
        let mydata = {
            shen: "1245690218233",
            shou: "18082223422",
            shi: "2002-10-01 14:00 至2002-11-11 16:00"
        };
        const kindList = ["男", "女"];//选择男女
        const kindListy = ['核实后转居家监测', '集中隔离后转居家监测', '手动登记'];
        const kindListx = ['监测中', '已解除'];
        //查询数据
        let radio1 = ref("");//查询正常异常初始数据
        let changea=ref("");//搜索性别
        let changea1=ref('');//下拉框的值
        let changea2=ref("");//下拉框的值
        let name=ref("");//查询姓名
        let shen=ref("");//查询身份证
        let phone=ref("");//联系电话
        
        const cha=()=>{ //查询按钮
            // console.log('姓名: '+ name.value + '身份证: ' + shen.value);
            console.log(name.value);
            axios({
                method:"get",url:"homeMonitoring/CriteriaQuery",
                params:{
                    currentPage:0,
                    pageSize:10,
                    name:name.value,
                    sex:changea.value,
                    idNum:shen.value,
                    phoneNum:phone.value,
                    source:changea1.value,
                    normalOrAbnormal:radio1.value,
                    status:changea2.value,
                }
               }).then((res)=>{
                let a=res.data.data.districtSysContactList;
                tableData1.tableData=a
                // console.log(res.data.data.districtSysContactList);
                
                
               })

            
        };
        let chong=()=>{ //重置按钮
            radio1.value=("");changea.value=("");changea1.value=("");changea2.value=("");name.value=("");shen.value=("");phone.value=("");
            
        };
        //导出excel
        const titleArr = ['序号','姓名','性别','身份证号','联系电话','籍贯地址','现居地','密接类型','来源','登记人','登记日期','隔离解除日期','状态','异常状态']
        const daoExcel=()=>{
            Excel(tableData1.tableData, 'test', titleArr, 'biao')
            // console.log('成功啦');
        }
        //查看详情按钮
        const vdeta=(obj)=>{
            console.log(obj);
            
            // router.push({name:'cha',query:{id:1}})
        }
        //密切跟踪按钮
        const fclo=(obj)=>{
            console.log(obj);
            // router.push({name:'miqie',query:{id:1}})
        }
        //解除监控按钮
        const Unmonitoring=(obj)=>{
            console.log(obj);
            // router.push({name:'meij',query:{id:1}})
        }
        //分页
        let currentPage = ref(1);//当前页数
        let pageSize = ref(10);
        let small = ref(false);
        let background = ref(false);
        let disabled = ref(false);

        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)
            
        };
        //跳转
        const handleCurrentChange = (val: number) => {
            console.log(val)
            
        };
        const noticeList = reactive({
            list: []
        });
        //删除
        let que=ref(false);
        let fan=(()=>{
            que.value=false
           });
        let que1=(()=>{
            que.value=false
            axios({
            method:"post",url:"/dailyAddition/deleteContactById",
            params:{id:san2}
           }).then((res)=>{
            console.log('删除成功');
           })
           });
        let san2=ref()
        const san=(obj:any)=>{ //删除姓名的内容
            san2=obj
            que.value=true
           }
        //密切模态框
        let idd=ref()
        let isShow = reactive({
            showDialog: false,//模态框
        });
        async function show(obj) {
            isShow.showDialog = true; //激活模态框
            idd=obj.id
            return idd
        };
        function hidden() {
            isShow.showDialog = false; // 返回关闭模态框
        };
        function hidden2(){ //进行数据导入
            
                
            console.log(idd);
            axios({
            method:"post",url:"dailyAddition/alterStatus",
            params:{id:idd}
           }).then((res)=>{
            isShow.showDialog = false;
            alert("解除成功");
            axios({
                method:"get",url:"/homeMonitoring/findAllContact"
               }).then((res)=>{
                let a=res.data.data;
                tableData1.tableData=a;
                
                
               })
           })
            
        };
        onMounted(async()=>{
            //挂载前获取全部参数
            //展示全部数据
            await axios({
                method:"get",url:"homeMonitoring/findAllContact"
               }).then((res)=>{
                console.log('====');
                console.log(res);
                
                let a=res.data.data;
                tableData1.tableData=a;
                console.log(a);
                
                
               })
                
            })
        //发送请求
        return {
            ...toRefs(tableData1), mydata,currentPage, pageSize, handleSizeChange, handleCurrentChange, kindList,
            kindListy, kindListx, radio1,
            changea,changea1,changea2,cha,shen,phone,
            name,chong,daoExcel,vdeta,fclo,Unmonitoring,
            background,
            small,
            disabled,
            ...toRefs(noticeList),
            que,fan,que1,san2,san,//删除
            idd,isShow,hidden,hidden2,show//解除
        }
    }
})


</script>
    
<style scoped lang="less">
.hh {
    width: 100%;
    height: 800px;
    background-color: rgb(255, 255, 255);
}

.quan {
    width: 100%;
    height: 700px;
}

// 设置表头样式
/deep/ .el-table th {
    background-color: #f9f9f9 !important;
    color: black;
    Font-weight: 400; // 字体粗细

}

.ju {
    padding: 20px 0px 20px 0px;
}

.head {
    background-color: #ffffff;
    width: 100%;
    height: 240px !important;
    margin-bottom: 20px;
}

.zhong {
    width: 298px;
    height: 42px;
    margin-top: 20px;
    background-color: #ffffff;
}

.zhong span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    margin-top: 10px
}

.zhong1 {
    border-bottom: 2px solid #338ae5;
}

.hh1 {
    padding-top: 50px;
    margin-left: 35px;
    margin-right: 35px
}

.name {
    padding: 20px 60px 20px 20px;
    display: flex;
    justify-content: space-between
}

.name span {
    font-size: 30px;
    color: #333333
}

.xia {
    padding-left: 20px;
    margin-top: 3px;
}

.xia1 {
    width: 100px;
    display: inline-block;
    margin-right: 20px;
}

.mask {
    /* 创建遮罩层 */
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.dialog1 {
    text-align: center;
    width: 600px;
    height: 400px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    /* top和left这个两个50%表示的是，这个弹框的顶部到页面的顶部，弹框的左侧到页面的左侧 */
    transform: translate(-50%, -50%);
    /* 这个偏移表示的是，偏移这个div框自身宽度和高度的50% */
    h2{
        margin-top:50px
    }
    button{
        margin-top:50px
    }
}

.xin {
    margin-left: 35px;
    margin-top: 35px;
    width: 100px;
    height: 50px;
    font-size: 16px
}
.dao{
    margin-left: 35px;
    margin-top: 35px;
    width: 120px;
    height: 50px;
    font-size: 16px;
    color:rgb(24, 23, 23);
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
}
.tan {
    margin: 30px 0px 50px 0px
}

.tan span {
    display: inline-block;
    padding-top: 20px;
    margin-right: 5px
}

.fan {
    margin-left: 35px;
    margin-top: 30px
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.fenye {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: row-reverse
}

.el-pagination {
    margin-right: 30px
}

.chaxun {
    display: flex;
    width: 100%;
    margin:30px 0px 20px 35px;
    button{
        width: 100px;
        height: 50px;
        font-size:17px
    };
    .mb-2{
        margin-left:20px
    }
}

.head span {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-size:13px;
    
}

.head input {
    width: 232px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #efefef;
    margin-left:10px;
    text-indent: 5px;
}
.head1{
    width: 100%;
    display: flex;
    align-items: center;
    padding-top:20px;
    select{
        width: 232px;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #efefef;
        margin-left:10px;
        font-size:13px
    }
}
.bei{
    width: 0;
    height: 0;
    border: 12px solid;
    border-color: rgb(255, 0, 0) rgb(255, 255, 255) rgb(255, 255, 255) rgb(255, 0, 0);
    position: absolute;
    top:0px
   }
.yi{
    position: absolute;
    top:-6px;
    left:0px;
    font-size:10px;
    color: rgb(255, 255, 255);
   }
//删除页面
.que{
    position: fixed;
    top:calc(50% - 200px);
    left:calc(50% - 150px);
    width: 300px;
    height: 400px;
    background-color: #f0dddd;
    z-index:2000;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h1{
        margin-bottom:30px
    }
    button{
        margin-left:20px
    }
}
</style>